<template>
	<view class="container">
			<view class="hader">
				<view class="miantit">
					<image class="mainTitIconTwo" src="https://dysx-h5.shjiuliwl.com/Eblock/images/maintt.png"></image>
					<view class="mainText">点击下方上传二维码即可生成私信卡片</view>
				</view>
				<view class="mian_tit_center" @tap="indexlook">
					<view class="main_tit_top" v-if="baseallvalue&&baseallvalue.logo_list&&baseallvalue.logo_list[0]">
						<image class="previewimg" :src="default_img"></image>
						<view class="previewtext">
							<view class="previewtext_tit">{{ default_main_tit}}</view>
							<view class="previewtext_sub_tit">{{ default_sub_tit }}</view>
						</view>
					</view>
					<view class="mian_tit_bottom">
						<image class="editicon" src="https://dysx-h5.shjiuliwl.com/Eblock/images/edit.png"></image>
						<view class="edittext">编辑</view>
					</view>
				</view>
			</view>
			<view class="mainContent">
				<view class="phoneinput">
					<view class="phonetit">手机号</view>
					<input class="input1" v-model="phone" type="number" placeholder="请填写手机号用于关联您的卡片信息" />
				</view>
				<view class="mainContentitemtit">上传二维码</view>
				<view class="imgs">
					<!-- <view class="imgitem" v-for="(item,index) in myupimg">
						<image class="itemimg" :src='item'></image>
						<image class="cha" src="https://dysx-h5.shjiuliwl.com/Eblock/images/cha.png" @tap="claseupimg(index)"></image>
					</view>
					<view class="imgitem" @tap="upimg" v-show="imglength <= 2">
						<image class="itemimg" src="https://dysx-h5.shjiuliwl.com/Eblock/images/upimg.png"></image>
					</view> -->
					<jade-image-upload
						:list="media"
						:control="control"
						:maxCount="maxCount"
						:compressSize="compressSize"
						:compressQuality="compressQuality"
						:compressWidth='compressWidth'
						:imageSize="imageSize"
						@chooseFile="chooseFile"
						@imgDelete="mediaDelete">
						</jade-image-upload>
				</view>
			</view> 
			<view class="buttom" @tap="torequest">生成卡片链接</view>
			<view class="query">
				<view class="query_tit">生成卡片查询</view>
				<view class="search">
					<input class="searchinput" v-model="serachinput" type="number" placeholder="请输入卡片关联手机号查询"/>
					<view class="search_sbmit" @tap="searchorder">查询</view>
				</view>
			</view>
			<!-- 第二次弹出（两张卡片） -->
			<uni-popup ref="popup" background-color="rgba(0, 0, 0,0.4)" :mask-click="false" :safe-area="false">
				<view class="popupcenter">
					<view class="title"> 
						<view class="block"></view>
						<view class="text">抖音卡片已生成</view>
						<view class="codema">审核码：{{ code }}</view>
					</view>
					<view class="hader" v-if="baseallvalue&&baseallvalue.logo_list&&baseallvalue.logo_list[0]">
						<image class="img" :src="default_img"></image>
						<view class="hader_main" @tap="toxcxyl">
							<view class="mian_tit">{{ default_main_tit }}</view>
							<view class="sub_tit">{{  default_sub_tit }}</view>
							<view class="right_tit">待审核  1小时内有效</view>
						</view>
					</view>
					<view class="tishi">当前为抖音测试卡片，将进行人工审核后才可使用</view>
					<view class="tokefucs" @tap="getservicelink">复制审核码 客服审核</view>
					<image src="https://dysx-h5.shjiuliwl.com/Eblock/images/叉叉.png" class="closeimg" @click="close"></image>
				</view>
			</uni-popup>
			<!-- 编辑弹框 -->
			<uni-popup ref="popupbj" background-color="rgba(0, 0, 0,0.4)" :safe-area="false">
				<view class="popupbjcmain">
					<!-- 改变图片 -->
					<view class="tobj" v-show="popsshow == 0">
						<view class="tit">选择卡片封面图</view>
						<view class="imgs">
							<view :class="item==default_img?'imgitem default':'imgitem'" v-for="(item,index) in baseallvalue.logo_list" @tap="defaultimg(item)">
								<image class="item" :src="item"></image>
								<image class="xzimg" v-show="item==default_img" src="https://dysx-h5.shjiuliwl.com/Eblock/images/txxz.png"></image>
							</view>
							<image class="scimg" @tap="upfmimg" src="https://dysx-h5.shjiuliwl.com/Eblock/images/redsc.png"></image>
						</view>				
						<view class="bootoms">
							<view class="mian_back" @tap="popupbjclose">取消</view>
							<view class="suretp" @tap="tpnext">确定</view>
						</view>
					</view>
					<view class="maintit" v-show="popsshow == 1">
						<view class="tit">选择卡片主标题</view>
						<input class="maintit_input" v-model="default_main_tit" placeholder-style="color:rgba(189, 189, 189, 1);fontSize:28rpx;" placeholder="如无合适标题，可填写自定义卡片主标题" />
						<scroll-view scroll-y="true" class="mainalltit">
							<view class="mainalltit_item" v-for="(item,index) in baseallvalue.main_title_list" @tap="changemainTit(item)">
								<view class="imgblack">
									<uni-icons v-show="default_main_tit==item" type="checkmarkempty" size="24" color="rgba(255, 87, 51, 1)"></uni-icons>
								</view>
								<view :class="default_main_tit==item?'mainalltit_item_text default':'mainalltit_item_text'">{{ item }}</view>
							</view>
						</scroll-view>
						
						<view class="bootoms">
							<view class="mian_back" @tap="mainback">上一步</view>
							<view class="maintit_sure" @tap="mainnext">确定</view>
						</view>
					</view>
					<view class="maintit" v-show="popsshow == 2">
						<view class="tit">选择卡片副标题</view>
						<input class="maintit_input" v-model="default_sub_tit" placeholder-style="color:rgba(189, 189, 189, 1);fontSize:28rpx;" placeholder="如无合适标题，可填写自定义卡片主标题" />
						<scroll-view scroll-y="true" class="mainalltit">
							<view class="mainalltit_item" v-for="(item,index) in baseallvalue.sub_title_list" @tap="changesubTit(item)">
								<view class="imgblack">
									<uni-icons v-show="default_sub_tit==item" type="checkmarkempty" size="24" color="rgba(255, 87, 51, 1)"></uni-icons>
								</view>
								<view :class="default_sub_tit==item?'mainalltit_item_text default':'mainalltit_item_text'">{{ item }}</view>
							</view>
						</scroll-view>
						<view class="bootoms">
							<view class="mian_back" @tap="subback">上一步</view>
							<view class="maintit_sure" @tap="subnext">确定</view>
						</view>
					</view>
				</view>
			</uni-popup>
	</view>

</template>

<script>
import { onGotApiData ,getService ,addClick} from '../../utils/api.js';
export default {
	data() {
		return {
			imgs: [], // 图片
			baseallvalue:{}, //返回的页面的全部基础数据
			default_img : '', // 选中的图片
			default_main_tit: '', //选中的主标题
			default_sub_tit: '', //选中的副标题
			link:'', //链接
			myupimg:[],//自己上传的照片
			imglength:0, //图片一共多少涨
			channel_no:'', 	//渠道号
			phone:'',   //填写的手机号
			code:'', //生成时候产生的code
			popsshow:0, //编辑展示的内容0,1,2
			serachinput:'', // 查询订单的输入值？
			control: true,
			maxCount: 3,
			compressSize: 0.2,
			imageSize: 12,
			compressQuality: 0.8,
			compressWidth: 750,
			uploadTask: null,
			media: [], //数据源
		}
	},
	onLoad(e){
		this.channel_no = e.channelNo;
		uni.setStorageSync('EK_channel_no',this.channel_no)
		console.log('地址栏参数',this.channel_no)
		// 获取首页基础信息
		this.getbase()
		// 获取页面地址
		uni.setStorageSync('EK_indexhref',window.location.href)
		this.link = window.location.href
		// 进入首页的执行一次
		addClick('首页','V3','访问数')

	},
	onShow() {

	},
	onReady() {
    // 页面初次渲染完成时执行的代码
	},
	onHide() {
    // 页面隐藏时执行的代码
	},
	onUnload() {
    // 页面卸载时执行的代码
	},
	watch: {
		myupimg: {
        immediate: true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue, oldValue) {
          console.log('上传照片的数量改变了', newValue.length)
		  this.imglength = newValue.length
        }
      }
    },
	methods: {
		// 获取页面基础信息
		getbase () {
			console.log('返回基础信息')
			const params = {}
			onGotApiData('/api/title/list','GET',params,this.base_value)
		},
		// 获取基础信息结果
		base_value (result) {
			console.log('返回基础信息',result)
			this.baseallvalue = result.data
			this.default_img = this.baseallvalue.logo_list[0]
			this.default_main_tit = this.baseallvalue.main_title_list[0]
			this.default_sub_tit = this.baseallvalue.sub_title_list[0]
		},
		// 选择主标题
		changemainTit (e) {
			console.log(e)
			this.default_main_tit = e
			console.log(this.default_main_tit)
		},
		// 选择副标题
		changesubTit (e) {
			console.log(e)
			this.default_sub_tit = e
			console.log(this.default_sub_tit)
		},
		// 选中图片
		defaultimg (e) {
			console.log('选中图片',e)
			this.default_img = e
		},
		// 选中的图片点击确定
		tpnext(){
			this.popsshow = 1
		},
		// 主标题中点击上一步
		mainback(){
			this.popsshow = 0
		},
		// 主标题点击下一步
		mainnext(){
			if(this.default_main_tit == ''){
				uni.showToast({
					title: '请选择一个主标题',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
			}else{
				this.popsshow = 2
			}

		},
		// 副标题点击上一步
		subback(){
			this.popsshow = 1
		},
		// 副标题确定
		subnext(){
			if(this.default_sub_tit == ''){
				uni.showToast({
					title: '请选择一个副标题',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
				return
			}
			this.popsshow = 0
			this.$refs.popupbj.close()	
		},
		// 对于链接的校验
		isurl (url) {
			try {
				new URL(url);
				return true; 
			}catch(err){ 
				return false; 
			}
		},
		// 生成卡片
		torequest () {
			// 事件统计
			addClick('首页','V3','生成卡片按钮')
			// this.$refs.popup.open('center')
			// return
			// return 	uni.navigateTo({
			// 			url: '/pages/success/success?code=V5j7MF'
			// 		});
			if(this.default_main_tit == '' || this.default_sub_tit == ''){
				return uni.showToast({
					title: '请选择主/副标题',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
			}
		     // 对手机号进行校验
			const phoneRegex = /^1[3456789]\d{9}$/;
			if( this.phone == '' || !phoneRegex.test(this.phone)){
				return uni.showToast({
					title: '请填写正确手机号',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
			}
			if(this.media == 0){
				return uni.showToast({
					title: '请上传二维码',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
			}
			// JSON.stringify(this.myupimg).slice(1, -1);
			let newStr = ''
			// this.myupimg.forEach((item,index) => {
			// 	if(newStr!=''){
			// 		newStr = newStr + "," + item
			// 	}else{
			// 		newStr = item
			// 	}
			// });
			this.media.forEach((item,index)=>{
				if(newStr!=''){
					newStr = newStr + "," + item.src
				}else{
					newStr = item.src
				}
			})
			const params = { 
				card_phone:this.phone,
				card_name:this.default_main_tit,
				card_picture: this.default_img,
				link: this.link,
				crad_qr_code: newStr,
				card_describe: this.default_sub_tit,
				card_type: 1,
				link_type: 'douyin',
				channel_no : this.channel_no,
			}
			const oldupcard = uni.getStorageSync('dtsx_upcard') || ''
			const nowupcard = JSON.stringify(params)
			// 进行对比
			if(oldupcard !== nowupcard){
					// 先将参数存一下
				uni.setStorageSync('dtsx_upcard',JSON.stringify(params))
				
			}else{
			    const cardcode = uni.getStorageSync('dtsx_cardCode')
				return uni.navigateTo({
					url: '/pages/success/success?code='+ cardcode
				});
			}
			onGotApiData('/api/card/v1/create','POST',params,this.upcard)
		},
		// 返回的结果
		upcard (result) {
			console.log("result",result)
			if(result.code == 200){
				uni.setStorageSync('dtsx_cardCode',result.data.card_code)
				if(result.data.is_vip == false){
					uni.navigateTo({
						url: '/pages/success/success?code='+ result.data.card_code
					});
				}else{
					this.code =	result.data.card_code
					this.card_url = result.data.card_url
					this.$refs.popup.open('center')
				}
			}
		},
		// 关闭弹框  
		close(){ 
			this.$refs.popup.close()
		},
		// 去小程序预览
		toxcxyl(){
			// 事件统计
			addClick('首页','V3','弹窗卡片预览')
			window.location.href = this.card_url
		},
		// 吊起小程序客服审核接口
		getservicelink () {
			// 事件统计
			addClick('首页','V3','弹窗客服审核按钮')
			uni.setClipboardData({
				data: this.code,
				success: function() {
					uni.showToast({
						title: '复制成功',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			})
			const params = {
				link:this.link,
				subject:'ppz'
			}
			getService('/api/kefu/douyin_kefu','POST',params,this.Service_value)
		},
		Service_value (result) {
			console.log("客服",result)
			window.location.href = result.data
		},
		// 上传图片
		upimg(){
			// console.log('上传图片')
			let that = this
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: function (res) {
					console.log(JSON.stringify(res.tempFilePaths));
					// 往后端接扣上传/
					uni.uploadFile({
						url: 'https://dysx-api.ksbmtb.com:8889/file/upload_img', //仅为示例，非真实的接口地址
						filePath: res.tempFilePaths[0],
						name: 'file',
						success: (uploadFileRes) => {
							const data = JSON.parse(uploadFileRes.data)
							console.log('获取到的地址', data.data.url)
							that.myupimg.push(data.data.url)
							console.log('地址',that.myupimg)
							// 事件统计
							addClick('首页','V3','二维码上传')
						}
					});
				}
			});
		},
		// 清除上传的图片
		claseupimg (index) {
			uni.showModal({
					content:'是否删除已上传二维码',
					confirmText:'确认',
					cancelTexr:'取消',
					success:(res)=>{
						if(res.confirm){
							this.myupimg.splice(index, 1);
						}
					}
				})
		},
		// 点击首页预览给提示
		indexlook(){
			addClick('首页','V3','卡片编辑')
			// uni.showToast({
			// 	title: '请上传二维码，生成卡片链接后即可预览',
			// 	icon: 'none',
			// 	//显示持续时间为 2秒
			// 	duration: 2000
			// })
			this.$refs.popupbj.open('bottom')
		},
		popupbjclose(){
			this.$refs.popupbj.close()
		},
		// 上传封面图片
		upfmimg(){
			// console.log('上传图片')
			let that = this
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: function (res) {
					console.log(JSON.stringify(res.tempFilePaths));
					// 往后端接扣上传/
					uni.uploadFile({
						url: 'https://dysx-api.ksbmtb.com:8889/file/upload_img', 
						filePath: res.tempFilePaths[0],
						name: 'file',
						success: (uploadFileRes) => {
							console.log('uploadFileRes',uploadFileRes)
							const data = JSON.parse(uploadFileRes.data)
							console.log('获取到的地址', data.data.url)
							that.default_img = data.data.url
						},
						fail: (err) => {
						// 上传失败处理
						console.error('上传失败', err);
						},
						// complete: () => {
						// // 上传完成后，进度条隐藏
						// this.uploadProgress = 0;
						// },
						// onProgressUpdate: (res) => {
						// 	console.log('上穿进度',res)
						// // 更新上传进度
						// this.uploadProgress = res.progress;
						// },
					});
				}
			});
		},
		//上传
		chooseFile(e) {
			this.uploadFileToServe(e[0])
			// console.log('上传图片返回1',e[0])
		},
		//中断上传并删除S
		mediaDelete(e) {
			this.uploadTask ? this.uploadTask.abort() : ''
			this.media.splice(e,1)
			console.log('this.media',this.media)
		},
		//上传逻辑处理
		uploadFileToServe(urlList) {
			if (!urlList || urlList.length <= 0) {
				return
			};
			this.uploadTask = uni.uploadFile({
				url: 'https://dysx-api.ksbmtb.com:8889/file/upload_img',
				filePath: urlList.src,
				name: 'file',
				success: (res) => {
					// console.log('上传图片返回2',res)
					let data = JSON.parse(res.data) 
					if (!data.data.url) {
						urlList.status = 'error'
						urlList.progress = '上传失败'
					} else {
						urlList.status = 'success'
						urlList.progress = '上传成功'
						urlList.src = data.data.url
					}
				}
			});
			this.uploadTask.onProgressUpdate((res) => {
				urlList.percent = res.progress
				this.media.splice(urlList.index,1,urlList)
			})
			// console.log('上传图片返回3',this.uploadTask)
			console.log('上传图片返回4',this.media)
		},
		// 查询订单的接口
		searchorder(){
			// 对手机号进行校验
			const phoneRegex = /^1[3456789]\d{9}$/;
			if( this.serachinput == '' || !phoneRegex.test(this.serachinput)){
				return uni.showToast({
					title: '请填写正确手机号',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
			}
			uni.navigateTo({
				url: '/pages/cardlist/cardlist?phone='+ this.serachinput
			});
				return
			const params = {
				phone:this.serachinput,
				page:'1',
				size:10,
			}
			onGotApiData('/api/card/v1/page_list','GET',params,this.searchorder_value)
		},
		searchorder_value(result){
			if(result.code ==200){
				console.log('查询到的订单',result.data.total)
				if(result.data.total > 0){
					uni.navigateTo({
						url: '/pages/cardlist/cardlist?phone='+ this.serachinput
					});
				}
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		// width: 750rpx auto;
		// background: url('https://dysx-h5.shjiuliwl.com/Eblock/images/mianbg.png') no-repeat;
		background-size: 100% 100%;
			.hader{
				width: 750rpx;
				height: 430rpx;
				margin: 0 auto;
				// border: 1px solid black;
				background: url('https://dysx-h5.shjiuliwl.com/Eblock/images/lansebannan.png');
				background-size: 100% 100%;
				// background-color: rgba(255, 155, 133, 0.8);
				border-radius: 10rpx 10rpx 0 0;
				box-shadow: -4rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.15);
				.miantit{
					width: 700rpx;
					height: 150rpx;
					padding-top: 60rpx;
					margin: 0 auto;
					// border: 1px solid black;
					.mainTitIconTwo{
						width: 360rpx;
						height: 52rpx;
						margin: 14rpx 0 15rpx 0rpx;
						// border: 1px solid black;
					}
					.mainText{
						width: 650rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						color: rgba(255, 255, 255, 0.8);
						text-align: left;
						text-indent: 0.5em;
					}
				}
				.mian_tit_center{
					width: 710rpx;
					height: 300rpx;
					margin:  0 auto;
					margin-top: 30rpx;
					padding-top: 20rpx;
					background-color: #fff;
					border-radius: 10rpx;
					background: rgba(255, 255, 255, 1);
					box-shadow: -4px 5px 8px  rgba(0, 0, 0, 0.25);
					.main_tit_top{
						width: 710rpx;
						height: 220rpx;
						border-bottom: 1rpx solid rgba(242, 242, 242, 1);
						// box-shadow: -4px -5rpx 8rpx 4rpx rgba(0, 0, 0, 0.25);
						display: flex;
						.previewimg{
							width: 220rpx;
							height: 220rpx;
							margin: 0 0 0 4rpx;
							border-radius: 10rpx;
						}
						.previewtext{
							width: 490rpx;
							height: 220rpx;
							// border: 1px solid black;
							.previewtext_tit{
								width: 470rpx;
								height: 90rpx;
								font-size: 36rpx;
								font-weight: 400;
								line-height: 45rpx;
								margin: 40rpx 0 0 16rpx;
								// border: 1px solid black;
								color: rgb(0, 0, 0);
								white-space: nowrap; /* 不换行 */
								overflow: hidden; /* 超出部分隐藏 */
								text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
							}
							.previewtext_sub_tit{
								width: 470rpx;
								height: 80rpx;
								margin:  0 0 0 16rpx;
								font-size: 28rpx;
								// border: 1px solid black;
								font-weight: 400;
								line-height: 40rpx;
								color: rgba(128, 128, 128, 1);
								display: -webkit-box; /* 必须指定display属性 */
								overflow: hidden; /* 必须指定overflow属性 */
								text-overflow: ellipsis; /* 显示省略号 */
								max-height: 80rpx; /* 最大高度（根据需求调整）*/
								-webkit-line-clamp: 2; /* 最多显示的行数 */
								-webkit-box-orient: vertical; /* 必须指定box-orient属性 */
							}
						}
					}
					.mian_tit_bottom{
						width: 110rpx;
						height: 60rpx;
						padding-top: 20rpx;
						// border: 1px solid black;
						margin: 0 auto;
						display: flex;
						.editicon{
							width: 34rpx;
							height: 34rpx;
							// border: 1px solid black;
						}
						.edittext{
							width: 60rpx;
							height: 34rpx;
							font-size: 28rpx;
							margin-left: 4rpx;
							// border: 1px solid black;
							line-height: 34rpx;
							color: rgba(54, 104, 255, 1);
						}
					}
				}
			}
			// 主要填写表格
			.mainContent{
				width: 710rpx;
				// height: 320rpx;
				margin: 0 auto;
				padding-top: 40rpx;
				padding-bottom: 20rpx;
				margin-top: 150rpx;
				z-index: 9;
				background-color: #fff;
				border-radius: 10rpx;
				box-shadow: -4px 5px 8px  rgba(0, 0, 0, 0.25);
				.phoneinput{
					width: 660rpx;
					height: 70rpx;
					border-bottom: 1px solid rgba(242, 242, 242, 1);
					margin: 0 auto;
					display: flex;
					.phonetit{
						width: 100rpx;
						height: 50rpx;
						font-size: 28rpx;
						font-weight: 700;
						// border: 1px solid black;
						line-height: 50rpx;
						color: rgba(56, 56, 56, 1);
					}
					.input1{
						width: 540rpx;
						height: 50rpx;
						padding-left: 10rpx;
						// border: 1px solid black;
						line-height: 50rpx;
						color: rgb(0, 0, 0);
						font-size: 28rpx;
					}
					input::placeholder{
						font-size: 24rpx;
					}
				}
				.mainContentitemtit{
					width: 660rpx;
					height: 50rpx;
					padding-top: 30rpx;
					font-size: 28rpx;
					font-weight: 700;
					margin: 0 auto;
					line-height: 50rpx;
					color: rgba(56, 56, 56, 1);
				}
				.imgs{
					width: 660rpx;
					height: 200rpx;
					padding: 20rpx 0;
					margin: 0 auto;
					// margin-top: 30rpx;
					// border: 1px solid black;
					display: flex;
					.imgitem{
						width: 150rpx;
						height: 150rpx;
						margin: 25rpx 20rpx 0 0;
						// background-color: pink;
						position: relative;
						.itemimg{
							width: 150rpx;
							height: 150rpx;
						}
						.cha{
							width: 32rpx;
							height: 32rpx;
							position: absolute;
							top: -6rpx;
							left: 130rpx;
						}
						.progress{
							width: 100rpx;
							height: 20rpx;
							border: 1px solid black;
						}
					}
					::v-deep .column-three{
						width: 180rpx;
						height: 180rpx;
					}
				}
			}
			.buttom{
				width: 660rpx;
				height: 100rpx;
				margin: 0 auto;
				margin-top: 80rpx;
				margin-bottom: 80rpx;
				border-radius: 50rpx;
				background: linear-gradient(90deg, rgba(76, 108, 252, 1) 0%, rgba(3, 49, 255, 1) 100%);
				box-shadow: 0px 8px 5px  rgba(0, 0, 0, 0.25);
				font-size: 40rpx;
				line-height: 100rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
			.query{
				width: 720rpx;
				height: 200rpx;
				border-radius: 12rpx;
				background: rgba(255, 255, 255, 1);
				padding-top: 30rpx;
				margin: 0 auto;
				.query_tit{
					width: 600rpx;
					height: 50rpx;
					margin: 0rpx 0 0 20rpx;
					font-size: 32rpx;
					font-weight: 700;
					line-height: 25rpx;
					color: rgba(0, 0, 0, 1);;
				}
				.search{
					width: 680rpx;
					height: 100rpx;
					// border: 1px solid black;
					margin: 0 auto;
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					.searchinput{
						width: 440rpx;
						height: 40rpx;
						padding: 20rpx 30rpx;
						font-size: 28rpx;
						background-color: rgba(242, 242, 242, 1);
						border-radius: 10rpx;
					}
					::v-deep .uni-input-placeholder{
						font-size: 28rpx;
					}
					.search_sbmit{
						width: 170rpx;
						height: 80rpx;
						border-radius: 12rpx;
						background: rgba(91, 121, 252, 1);
						box-shadow: 0px 8px 5px  rgba(0, 0, 0, 0.25);
						font-size: 32rpx;
						line-height: 80rpx;
						color: rgba(255, 255, 255, 1);
						text-align: center;
					}
				}
			}

			// 弹框样式
			.popupcenter{
				width: 720rpx;
				height: 640rpx;
				border-radius: 6px;
				background: rgba(255, 255, 255, 1);
				.title{
					width: 720rpx;
					height: 60rpx;
					padding-top: 40rpx;
					margin: 0 auto;
					display: flex;
					.block{
						width: 8rpx;
						height: 32rpx;
						background-color: rgba(15, 74, 252, 1);
						margin: 14rpx 0 0 16rpx;
						border-radius: 4rpx;
					}
					.text{
						width: 300rpx;
						height: 60rpx;
						font-size: 32rpx;
						font-weight: 700;
						line-height: 60rpx;
						// border: 1px solid black;
						color: rgba(56, 56, 56, 1);
						margin: 0 0 0 10rpx;
					}
					.codema{
						width: 280rpx;
						height: 60rpx;
						// border: 1px solid black;
						font-size: 32rpx;
						line-height: 60rpx;
						color: rgba(255, 87, 51, 1);
						text-align: right;
					}
				}
				.hader{
					width: 720rpx;
					height: 210rpx;
					border-radius: 10rpx;
					margin: 0 auto;
					margin-top: 30rpx;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
					display: flex;
					position: relative;
					.img{
						width: 200rpx;
						height: 200rpx;
						margin: 5rpx;
						border-radius: 10rpx;
					}
					.hader_main{
						width: 490rpx;
						height: 220rpx;
						margin: 0 0 0 20rpx;
						position: relative;
						.mian_tit{
							width: 490rpx;
							height: 90rpx;
							font-size: 36rpx;
							font-weight: 400;
							line-height: 50rpx;
							margin-top: 30rpx;
							// border: 1px solid black;
							color: rgba(56, 56, 56, 1);
							white-space: nowrap; /* 不换行 */
							overflow: hidden; /* 超出部分隐藏 */
							text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
						}
						.sub_tit{
							width: 490rpx;
							height: 60rpx;
							font-size: 30rpx;
							font-weight: 400;
							line-height: 30rpx;
							color: rgba(150, 149, 149, 1);
						}
						.right_tit{
							width: 220rpx;
 							height: 36rpx;
							border-radius: 0px 6px 0px 2px;
							background: linear-gradient(90deg, rgba(255, 124, 71, 1) 0%, rgba(255, 74, 3, 1) 100%);
							box-shadow: 0px 2px 4px  rgba(212, 48, 48, 0.25);
							position: absolute;
							top: 0;
							right: -2rpx;
							font-size: 22rpx;
							line-height: 36rpx;
							font-weight: 400;
							color: rgba(255, 255, 255, 1);
							text-align: center;
						}
					}
				}
				.tishi{
					width: 720rpx;
					height: 50rpx;
					border-radius: 10rpx;
					margin: 40rpx 0 20rpx 0;
					background: rgba(242, 242, 242, 1);
					font-size: 26rpx;
					line-height: 50rpx;
					color: rgba(128, 128, 128, 1);
					text-align: center;
				}
				.tokefucs{
					width: 600rpx;
					height: 100rpx;
					border-radius: 30px;
					margin: 0 auto;
					margin-top: 50rpx;
					background: linear-gradient(90deg, rgba(76, 108, 252, 1) 0%, rgba(3, 49, 255, 1) 100%);
					box-shadow: 0px 8px 5px  rgba(0, 0, 0, 0.25);
					font-size: 40rpx;
					line-height: 100rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
				}
				.closeimg{
					width: 54rpx;
					height: 54rpx;
					margin: 90rpx 0 0 310rpx;
				}
			}
			// 编辑弹框
			.popupbjcmain{
				width: 750rpx;
				// height: 900rpx;
				padding-bottom: 30rpx;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10rpx 10rpx 0 0;
				.tobj{
					width: 720rpx;
					margin: 0 auto;
					padding-top: 30rpx;
					.tit{
						width: 720rpx;
						height: 50rpx;
						font-size: 32rpx;
						font-weight: 700;
						line-height: 50rpx;
						color: rgba(56, 56, 56, 1);
					}
					.imgs{
						width: 720rpx;
						margin-top: 20rpx;
						display: grid;
						grid-template-columns: repeat(5, 1fr); /* 五列等宽 */
						gap: 30rpx; /* 子元素之间的间隔 */
						// border: 1px solid black;
						.imgitem{
							width: 100rpx;
							height: 100rpx;
							border-radius: 8rpx;
							border: 6rpx solid #fff;
							position: relative;
							.item{
								width: 100rpx;
								height: 100rpx;
								border-radius: 8rpx;
							}
							.xzimg{
								width: 80rpx;
								height: 80rpx;
								position: absolute;
								top: -30rpx;
								left: 46rpx;
							}
						}
						 .default{
							border: 6rpx solid rgba(250, 56, 12, 1);
						}
						.scimg{
							width: 112rpx;
							height: 112rpx;
							border-radius: 8rpx;
						}
					}
					.bootoms{
						width: 700rpx;
						height: 80rpx;
						margin-top: 40rpx;
						display: flex;
						justify-content: space-around;
						// border: 1px solid black;
						.mian_back{
							width: 250rpx;
							height: 70rpx;
							border-radius: 60rpx;
							border: 1px solid rgba(189, 189, 189, 1);
							font-size: 28rpx;
							line-height: 70rpx;
							color: rgba(166, 166, 166, 1);
							text-align: center;
						}
						.suretp{
							width: 270rpx;
							height: 70rpx;
							border-radius: 30px;
							background: rgba(54, 104, 255, 1);
							// margin: 0 auto;
							// margin-top: 50rpx;
							font-size: 28rpx;
							line-height: 70rpx;
							color: rgba(255, 255, 255, 1);
							text-align: center;
						}
					}

				}
				// 主标题选择
				.maintit{
					width: 700rpx;
					margin: 0 auto;
					padding-top: 30rpx;
					.tit{
						width: 700rpx;
						height: 50rpx;
						font-size: 32rpx;
						font-weight: 700;
						line-height: 50rpx;
						color: rgba(56, 56, 56, 1);
					}
					.maintit_input{
						width: 620rpx;
						height: 50rpx;
						padding: 12rpx 24rpx;
						border-radius: 10rpx;
						margin: 0 auto;
						margin-top: 20rpx;
						border: 1px solid rgba(189, 189, 189, 1);
					}
					.mainalltit{
						width: 700rpx;
						height: 600rpx;
						margin: 0 auto;
						margin-top: 30rpx;
						background-color: #fff;
						// border: 1px solid black;
						.mainalltit_item{
							width: 680rpx;
							height: 50rpx;
							margin: 10rpx;
							display: flex;
							.imgblack{
								width: 50rpx;
								height: 50rpx;
								// border: 1px solid black;
							}
							.mainalltit_item_text{
								width: 600rpx;
								height: 50rpx;
								// border: 1p solid black;
								margin-left: 10rpx;
								white-space: nowrap; /* 不换行 */
								overflow: hidden;
								text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
							}
							.default{
								color: rgba(255, 87, 51, 1);
							}
						}
					}
				}	
				.bootoms{
					width: 700rpx;
					height: 80rpx;
					margin-top: 40rpx;
					display: flex;
					justify-content: space-around;
					// border: 1px solid black;
					.mian_back{
						width: 250rpx;
						height: 60rpx;
						border-radius: 60rpx;
						border: 1px solid rgba(189, 189, 189, 1);
						font-size: 28rpx;
						line-height: 60rpx;
						color: rgba(166, 166, 166, 1);
						text-align: center;
					}
					.maintit_sure{
						width: 240rpx;
						height: 60rpx;
						border-radius: 60rpx;
						border: 1px solid rgba(255, 255, 255, 1);
						background-color: rgba(54, 104, 255, 1);
						font-size: 28rpx;
						line-height: 60rpx;
						color: rgba(255, 255, 255, 1);
						text-align: center;

					}
				}
			}
			.s-add-list-btn-icon {
				font-size: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin-bottom: 20rpx;
				color: #999;

			}
			.itemimg{
				width: 150rpx;
				height: 150rpx;
			}
	}
</style>
